<template>
  <div class="bottom-menu">
    <a-space>
      <a-button @click="goHome">首页</a-button>
      <a-button @click="goContacts">联系人</a-button>
      <a-button @click="goDiscover">发现</a-button>
      <a-button @click="goProfile">我</a-button>
    </a-space>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/');
    },
    goContacts() {
      this.$router.push('/contacts');
    },
    goDiscover() {
      this.$router.push('/discover');
    },
    goProfile() {
      this.$router.push('/profile');
    },
  },
};
</script>

<style scoped>
.bottom-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  border-top: 1px solid #eaeaea;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  z-index: 1000;
}
</style>